<template>
  <div style="margin-left: 2%;margin-right: 2%;margin-top: 10px">
      <!-- 表单 -->
      <el-card>
        <span style="font-size: 13px">项目编号：</span>
        <el-input v-model="projectSearch.projectCode" placeholder="请输入内容" style="width: 130px"></el-input>

        <span style="font-size: 13px;margin-left: 3%">项目名称：</span>
        <el-input v-model="projectSearch.projectName" placeholder="请输入内容" style="width: 130px"></el-input>


        <span style="font-size: 13px;margin-left: 3%">采购类别：</span>
        <el-select v-model="projectSearch.purchaseCategoryId" placeholder="请选择" style="width: 130px">
          <el-option label="货物类" value="1"></el-option>
          <el-option label="服务类" value="2"></el-option>
          <el-option label="工程类" value="3"></el-option>
        </el-select>

        <span style="font-size: 13px;margin-left: 3%">审批状态：</span>
        <el-select v-model="projectSearch.accApproveStatus" placeholder="请选择" style="width: 130px">
          <el-option label="审批通过" value="审批通过"></el-option>
        </el-select>

        <div style="display: inline;margin-left: 5%">
          <el-button class="search-button" size="mini" @click="searchCondition" type="primary">查询</el-button>
          <el-button size="mini" @click="clearMes">清空查询</el-button>
        </div>
      </el-card>

      <!-- 表格 -->
    <div style="margin-top: 10px;margin-bottom: 10px">
      <el-table
          :data="projectTable"
          style="width: 100%"
          v-loading="loading"
          border
      >
        <el-table-column prop="projectCode" label="项目编号"></el-table-column>
        <el-table-column prop="projectName" label="项目名称"></el-table-column>
        <el-table-column prop="purchaseCategoryName" label="采购类别"></el-table-column>
        <el-table-column prop="purchaseMethod" label="采购方式"></el-table-column>
        <el-table-column prop="budget" label="预算金额"></el-table-column>
        <el-table-column label="验收审批状态" width="160">
          <template slot-scope="scope">
            {{ scope.row.accSubstatus }}（{{ scope.row.accApproveStatus }}）
          </template>
        </el-table-column>

        <el-table-column prop="accApproveTime" label="审批通过时间"></el-table-column>
        <el-table-column label="归档状态" width="160">
          <template slot-scope="scope">
            {{ scope.row.archiveSubmitStatus }}（{{ scope.row.archiveApproveStatus }}）
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="{$index,row}">
            <!-- 在这里添加操作按钮 -->
            <span @click="goToManager(row)"
                       :style="{
                       textAlign: 'center',
                       marginLeft: '7px',
                       color:row.accApproveStatus === '审批通过' ? '#409eff' : 'gray'
                         }"
                       >归档管理</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {selectAllArchive,query} from "@/api/archive/archive";

export default {
  data() {
    return {
      projectSearch: {
        projectName: "",
        projectCode: "",
        purchaseCategoryId: "",
        accApproveStatus:"",
      },
      projectTable: [
        //测试数据，上线前请删除
        // {
        //   projectCode: 'A01001',
        //   projectName: '采购项目1',
        //   purchaseCategoryName: '货物类',
        //   purchaseMethod: '线下',
        //   budget: 10.04,
        //   accSubstatus: '已提交',
        //   accApproveStatus: '审批通过',
        //   accApproveTime: '2023-07-02 10:10:21',
        //   archiveSubmitStatus:'未提交',
        //   archiveSubmit:'2023-08-15 14:54:26',
        //   archiveApproveStatus:'已审批',
        //   archiveApproveTime:'2023-08-20 22:41:53',
        //   action: '归档管理',
        // },
      ],
      projectList: [],
      currentPage: 1,
      pageSize: 20,
      loading: true, // 修改是否显示加载页面
      total: 0,


    };
  },

  mounted() {
    this.onload()
  },

  methods: {

    //请求获得返回的项目
    async onload() {
      let res = await selectAllArchive()
      if (res) {
        this.loading = false
      }
      if (res.data.code === 200) {
        this.projectList = res.data.data.projectVos;
        this.total = res.data.data.total
        this.loadtable(1)
      } else {
        this.projectList = [];
        this.total = 0;
        this.$message.error(res.data.msg);
      }
    },

    //分页
    loadtable(index) {
      var i = 0;
      this.projectTable = [];
      for (i = 0; i < this.pageSize; i++) { // 修改此处的pagesize为pageSize
        if ((index - 1) * this.pageSize + i === this.total) {
          break;
        }
        this.projectTable.push(this.projectList[(index - 1) * this.pageSize + i]);
      }
      console.log("table", this.projectTable, "list", this.projectList);
    },

    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadtable(this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadtable(val)
    },

    // 输入关键字查询
    async searchCondition() {
      // 构建查询参数
      let theData = {};
      if (this.projectSearch.projectCode) {
        theData.projectCode = this.projectSearch.projectCode;
      }
      if (this.projectSearch.projectName) {
        theData.projectName = this.projectSearch.projectName;
      }
      if (this.projectSearch.purchaseCategoryId) {
        theData.purchaseCategoryId = this.projectSearch.purchaseCategoryId;
      }
      if (this.projectSearch.accApproveStatus) {
        theData.accApproveStatus = this.projectSearch.accApproveStatus;
      }

      // 调用查询接口
      try {
        let res = await query(theData); // 调用query接口，传入查询参数
        if (res.data.code === 200) {
          this.projectList = res.data.data.projectVos;
          this.total = this.projectList.length;
          this.currentPage = 1; // 重置当前页码
          this.loadtable(1)
        } else {
          this.projectList = [];
          this.total = 0;
          this.$message(res.data.msg);
        }
      } catch (error) {
        console.error("Error querying data:", error);
        this.$message.error("查询数据时出错");
      }
    },

    //清空查询
    clearMes() {
      Object.keys(this.projectSearch).forEach(index => this.projectSearch[index] = '')
      this.onload()
    },


    goToManager(row) {
      if (row.accApproveStatus !== '审批通过') {
         alert("项目没有审批通过不能查看,请联系采购管理进行审批");
      } else {
        this.$router.push({
          name: 'archiveManger',
          params: {
            projectCode: row.projectCode,
            projectName: row.projectName,
            purchaseCategoryId: row.purchaseCategoryId,
            budget: row.budget,
            archiveSubmitStatus: row.archiveSubmitStatus,
            archiveSubmitTime: row.archiveSubmitTime,
            archiveApproveStatus: row.archiveApproveStatus,
            archiveApproveTime: row.archiveApproveTime,
            quaSubmitP: row.quaSubmitP,
            projectId: row.projectId,
          },
        });
      }
    },
  }
};
</script>

<style>

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
